<template>
  <div class="constructionSituation">
    <div>
      <h2>管网设施概况</h2>
      <div class="dateSelect">
        <label for="date1">年份</label>
        <select name="" id="date1">
          <option value="2018年">2018年</option>
          <option value="2017年">2017年</option>
          <option value="2016年">2016年</option>
        </select>
      </div>
    </div>
    <div class="constructionSituationInner">
      <div class="conSitEchart" id="conSitEchart">
        <div>
          <canvas width="283" height="243" data-zr-dom-id="zr_0" style=""></canvas>
        </div>
        <div class="header-bar">
          建设概况 <br>污水管网: 200 (33.33%)
        </div>
      </div>
      <table class="conSitInfo">
        <tbody>
        <tr v-for="item in conSitInfo">
          <td>{{item.name}}：</td>
          <td>{{item.count}}{{item.unit}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    data:function () {
      return {conSitInfo:[]}
    },
    props:["consit"],
    created:function () {
      this.conSitInfo=this.consit
    }
  }
</script>

<style scoped="this">
  .conSitEchart {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: relative;
    background: transparent;
  }

  .conSitEchart > div {
    position: relative;
    overflow: hidden;
    width: 227px;
    height: 195px;
    padding: 0;
    margin: 0;
    border-width: 0;
    cursor: default;
  }

  .conSitEchart canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 227px;
    height: 195px;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0;
    margin: 0;
    border-width: 0;
  }

  .header-bar {
    position: absolute;
    display: none;
    white-space: nowrap;
    z-index: 9999999;
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    background-color: rgba(50, 50, 50, 0.7);
    border-radius: 4px;
    color: rgb(255, 255, 255);
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 14px;
    font-family: 'Microsoft YaHei';
    line-height: 21px;
    padding: 5px;
    left: 4px;
    top: 46px;
  }
</style>
